<div class="accessory-box">
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="service.humanType" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- outer circle -->
        <circle cx="16" cy="16" r="14" fill="none" stroke="#7f7f7f" stroke-width="1.5" />
        <!-- inner lightning bolt -->
        <path
          d="M12.2575393,17.7112593
            L12.1868707,17.7112593
            C11.0779698,17.7112593 10.6478221,16.9467914 11.2212184,16.0037726
            L16.4805582,7.35415962
            C17.67876,5.38357359 18.0624739,5.55948915 17.3376772,7.746963
            L15.7252918,12.6132252
            C15.3772095,13.6637556 15.9942825,14.5048291 17.0992511,14.5048291
            L20.1977772,14.5048291
            L20.1846183,14.5177121
            L20.2552868,14.5177121
            C21.3641878,14.5177121 21.7943355,15.2821799 21.2209392,16.2251988
            L16.1844844,24.5082506
            C14.864477,26.6791606 14.4411534,26.4839632 15.241777,24.0676402
            L16.7168658,19.6157462
            C17.0649481,18.5652158 16.447875,17.7241422 15.3429064,17.7241422
            L12.2443804,17.7241422
            L12.2575393,17.7112593 Z"
          fill="#7f7f7f"
        />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    <div class="accessory-label grey-text">{{ service.humanType }}</div>
  </div>
</div>
